<script setup>
import RightThird from "./components/RightThird.vue";
import RightSecond from "./components/RightSecond.vue";
import RightFirst from "./components/RightFirst.vue";
import MidSecond from "./components/MidSecond.vue";
import MidFirst from "./components/MidFirst .vue";
import LeftThird from "./components/LeftThird.vue";
import LeftSecond from "./components/LeftSecond.vue";
import LeftFirst from "./components/LeftFirst.vue";
</script>

<template>
  <div class="bg-[url('assets/imgs/2.jpg')] bg-cover bg-center h-screen text-white p-2 flex overflow-hidden">
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <left-first class="h-1/3 box-border pb-4"></left-first>
      <left-second class="h-1/3 box-border pb-4"></left-second>
      <left-third class="h-1/3 box-border pb-4"></left-third>
    </div>
    <div class=" w-1/2 mr-5 flex flex-col">
      <mid-first class=" bg-opacity-50 bg-slate-800 p-3"></mid-first>
      <mid-second class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1"></mid-second>
    </div>
    <div class=" flex-1  bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <right-first class="h-1/3 box-border pb-4"></right-first>
      <right-second class="h-1/3 box-border pb-4"></right-second>
      <right-third class="h-1/3 box-border pb-4"></right-third>
    </div>
  </div>
</template>

<style scoped></style>
